<template>
    <pos-dialog title="Check Out" :visible="visible" @close="close">
        <div class="order-items">
            <div class="order-item" v-for="(item,index) in order.line_items" :key="item.id">
                <div class="order-item__row">
                    <img :src="$imageSrc(item.image.src)" alt="" class="order-item__image">
                    <div class="order-item__name">{{ item.name }}</div>
                    <div class="order-item__price">
                        {{ item.quantity }} x {{ '€' + $toAmount(item.price) }}
                    </div>
                    <div class="order-item__total">€{{ item.getTotal().toFixed(2) }}</div>
                </div>
            </div>
        </div>
        <div class="order-totals">
            <div class="order-total">
                <div class="order-total__label">Subtotal</div>
                <div class="order-total__price">€{{ subTotal }}</div>
            </div>
            <div class="order-total" v-for="(f,idx) in order.fee_lines" :key="'a'+idx">
                <div class="order-total__label">Fee - {{ f.name }}</div>
                <div class="order-total__price">€{{ f.total }}</div>
            </div>
            <div class="order-total" v-for="(s,idx) in order.shipping_lines" :key="'b'+idx">
                <div class="order-total__label">Shipping - {{ s.method_title }}</div>
                <div class="order-total__price">€{{ s.total }}</div>
            </div>
            <div class="order-total order-total-total ">
                <div class="order-total__label">Total</div>
                <div class="order-total__price">€{{ total }}</div>
            </div>
        </div>
        <div class="form-group">
            <select class="form-control custom-select" v-model="methodIndex">
                <option v-for="(o,index) in paymentOptions" :value="index" :key="index">{{ o.title }}</option>
            </select>
        </div>
        <div class="form-group">
            <button class="btn btn-primary btn-lg btn-block text-uppercase" @click="onSubmit">check out</button>
        </div>
        <pos-loading :visible="showLoading"/>
    </pos-dialog>
</template>

<script>
import NumberPad from "./NumberPad.vue";

export default {
    name: "DialogPayment",
    components: {NumberPad},
    props: {
        value: false,
        order: {
            type: Object,
            default() {
                return {
                    line_items: []
                }
            }
        },
        total: {
            type: [Number, String],
            default: '0'
        },
        subTotal: {
            type: [Number, String],
            default: '0'
        }
    },
    watch: {
        value(val) {
            if (val !== this.visible) {
                this.visible = val;
            }
        }
    },
    data() {
        return {
            visible: false,
            amount: '0',
            paymentOptions: [],
            showLoading: false,
            methodIndex: 0
        }
    },
    methods: {
        close() {
            this.$emit('input', false);
        },
        onAmountChange(v) {
            this.amount = v;
        },
        onSubmit() {
            const {order, methodIndex} = this;
            const payment = this.paymentOptions[methodIndex];

            this.showLoading = true;
            this.$http.post('/orders', {
                ...order,
                payment_method: payment.id,
                payment_method_title: payment.title,
            }).then(response => {
                this.$emit('success', response);
            }).catch(reason => {
                this.$emit('error', reason);
                this.$showConfirm({
                    content: reason.message
                });
            }).finally(() => {
                this.showLoading = false;
                this.close();
            });
        },
        fetchPaymentOptions() {
            this.$http.get('/payment_gateways').then(response => {
                this.paymentOptions = response;
            });
        }
    },
    mounted() {
        this.fetchPaymentOptions();
    }
}
</script>

<style scoped>

</style>